<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'my-project',
    created () {
      let that = this
      var ws = new WebSocket('ws://127.0.0.1:5000/soc')
      ws.onmessage = function (event) {
        // console.log(event.data)
        var data = JSON.parse(event.data).message
        if (data === 'music') {
          // console.log('666')
          that.$router.push({name: 'musicplay'})
        }
      }
      var h = window.screen.height
      var w = window.screen.width
      var factor
      var factorh = h / 720
      var factorw = w / 1280
      if (factorh < factorw) {
        factor = factorh
      } else {
        factor = factorw
      }
      require('electron').webFrame.setZoomFactor(factor)
    }
  }
</script>

<style>
@font-face {
  font-family: "carton";
  src: url("~@/assets/fonts/carton.ttf?t=5DC4BF6");
}
body {
  font-family: 'carton';
  background-color: black;
}
#app {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1280px;
  height: 720px;
  background: url(~@/assets/home/bg.png) no-repeat;
  background-size: 100%;
  user-select: none;
  overflow: hidden;
}
p {
  color:white;
  font-size: 25px;
  font-weight: 900;
}
 /* @media screen and (min-width: 1900px) {
   #app {
     width:1920px;
     height:1080px;
   }
 }
 @media screen and (max-width: 1601px) {
   #app {
     width:1600px;
     height:900px;
   }
 }
 @media screen and (max-width: 1281px) {
   #app {
     width:1280px;
     height:720px;
   }
 }
 @media screen and (max-width: 801px) {
   #app {
     width:800px;
     height:720px;
   }
 } */
</style>
